import * as React from "react";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
// import IMG from "../../../img/tmp/cover.jpg";
import { useNavigate } from "react-router-dom";
import { UserContext, UserProContext } from "../../../App";
import { useContext } from "react";
import { useSnackbar } from "notistack";
import ThemeSwitch from "../../../components/ThemeSwitch";
import ChangeTheme from "../../../components/ChangeTheme";

function MyToolBar(props) {
  const [anchorElNav, setAnchorElNav] = React.useState(null);
  const [anchorElUser, setAnchorElUser] = React.useState(null);
  const navigate = useNavigate();
  const user = useContext(UserContext);
  const { enqueueSnackbar } = useSnackbar();

  const handleOpenUserMenu = (event) => {
    setAnchorElUser(event.currentTarget);
  };

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };
  const handleProCenter = () => {
    navigate("/student/index");
    handleCloseUserMenu();
  };
  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("role");
    enqueueSnackbar("退出登录", { variant: "info" });
    navigate("/login/index");
    user.setUser(0);
  };
  const userproContext = useContext(UserProContext);
  const handleNewBlog = () => {
    navigate("/student/homepage/blogeditor/-1");
    handleCloseUserMenu();
  };
  return (
    <Container maxWidth="100%">
      <Toolbar disableGutters>
        {props.children}
        <Typography
          variant="h6"
          noWrap
          component="a"
          sx={{
            flexGrow: 1,
            mr: 2,
            display: "flex",
            // fontFamily: "monospace",
            fontWeight: 700,
            letterSpacing: ".3rem",
            color: "inherit",
            textDecoration: "none",
          }}
        >
          {props.title}
        </Typography>

        <ChangeTheme />
        <ThemeSwitch />
        <Box sx={{ flexGrow: 0 }}>
          <Tooltip>
            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
              <Avatar alt="Remy Sharp" src={userproContext?.userPro?.avatar} />
            </IconButton>
          </Tooltip>
          <Menu
            sx={{ mt: "45px" }}
            id="menu-appbar"
            anchorEl={anchorElUser}
            anchorOrigin={{
              vertical: "top",
              horizontal: "right",
            }}
            keepMounted
            transformOrigin={{
              vertical: "top",
              horizontal: "right",
            }}
            open={Boolean(anchorElUser)}
            onClose={handleCloseUserMenu}
          >
            {/* <MenuItem> */}
            <Box sx={{ marginLeft: "10px", marginRight: "10px" }}>
              <Typography
                textAlign="center"
                variant="body"
                sx={{ fontFamily: "cursive" }}
              >
                你好,{userproContext?.userPro?.name}同志
              </Typography>
              {/* </MenuItem> */}

              <MenuItem onClick={handleProCenter}>
                <Typography textAlign="center">个人中心</Typography>
              </MenuItem>
              <MenuItem onClick={handleNewBlog}>
                <Typography textAlign="center">发表博客</Typography>
              </MenuItem>

              <MenuItem onClick={handleLogout}>
                <Typography textAlign="center">登出</Typography>
              </MenuItem>
            </Box>
          </Menu>
        </Box>
      </Toolbar>
    </Container>
  );
}
export default MyToolBar;
